<template>
  <div>
    <el-row style="padding: 10px">
      <el-col :span="6">
        <div class="block">
          <span class="demonstration">创建时间：</span>
          <el-date-picker
            v-model="form.createTime"
            type="datetime"
            @change="dateChange"
            size="small"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
     <el-col :span="2">
       <el-button type="primary" size="small" @click="loadTable">查询</el-button>
     </el-col>
      <el-col :span="8" style="font-size: 16px;font-weight: bold;">用户冻结金额列表</el-col>
    </el-row>
    <el-row>
      <el-table :data="page.list">

        <el-table-column width="80" type="index" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <el-table-column prop="balance" label="余额" align="center"></el-table-column>
        <el-table-column prop="lockMoney" label="冻结金额" align="center"></el-table-column>
        <el-table-column  label="创建时间" align="center">
          <template slot-scope="scope">
            {{dateformat(scope.row.createTime)}}
          </template>
        </el-table-column>
        <!--<el-table-column align="center">-->
          <!--<template slot-scope="scope">-->
            <!--<el-button type="text" @click="handleSave(scope.row.id)">修改</el-button>-->
            <!--<el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </el-row>
    <el-row style="padding: 10px;text-align: right">
      <el-pagination @current-change="pageChange" :current-page.sync="page.pageNumber" :page-size="page.pageSize"
                     layout="prev, pager, next, jumper" :total="page.totalRow">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>

import dateformat from '../../../assets/js/dateformat'
  export default {
    name: 'permissionIndex',
    data: function () {
      return {
        page: {},
        form: {
          createTime: undefined,
          pageSize: 10,
          pageNumber: 1
        },
        dateformat: dateformat

      }
    },
    methods: {
      loadTable: function () {
        if (this.form.createTime === '') {
          this.form.createTime = undefined
        }
        this.$api.getUserFirst(this.form).then(res => {
          if (res.code == '000000') {
            this.page = res.data;
            this.$message.success("获取冻结金额列表成功")
          }
        })
      },
      dateChange (val) {
        console.log(val)
        if (val) {
          this.form.createTime = Date.parse(val)
        } else {
          this.form.createTime = undefined
        }
      },
      pageChange (val) {
        this.form.pageNumber = val
        this.loadTable()
      }
    },
    created: function () {
      this.loadTable()
    }
  }
</script>

<style>

</style>
